<template>
  <div class="dndList">
    <div class="dndList-header clearfix">
      <h3>{{ sourceListTitle }} <el-tag>拖拽到[目标列表]下方 或 点击[名称]</el-tag></h3>
      <h3>{{ targetListTitle }} <el-tag type="warning">拖拽回去 或 点击列表[图标]进行删除 , 拖动改变顺序</el-tag></h3>
    </div>
    <div class="dndList-body">
      <div class="dndList-list">
        <draggable :list="sourceList" group="dadListGroup" class="dragArea">
          <div v-for="element in sourceList" :key="element.id" class="list-complete-item">
            <div class="list-complete-item-handle2" @click="pushEle(element)">
              <span class="num">{{ element.id }}</span> [ {{ element.label }} ]
            </div>
          </div>
        </draggable>
      </div>
      <div class="dndList-list target">
        <draggable :set-data="setData" :list="targetList" group="dadListGroup" class="dragArea">
          <div v-for="element in targetList" :key="element.id" class="list-complete-item">
            <div class="list-complete-item-handle">
              <span class="num">{{ element.id }}</span> [ {{ element.label }} ]
            </div>
            <div style="position:absolute;right:0px;">
              <span style="float:right;margin-top:-16px;margin-right:5px;" @click="deleteEle(element)">
                <i style="color:#ff4949" class="el-icon-delete" />
              </span>
            </div>
          </div>
        </draggable>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'DndList',
  components: { draggable },
  props: {
    targetList: {
      type: Array,
      default() {
        return []
      }
    },
    sourceList: {
      type: Array,
      default() {
        return []
      }
    },
    targetListTitle: {
      type: String,
      default: 'targetList'
    },
    sourceListTitle: {
      type: String,
      default: 'sourceList'
    }
  },
  methods: {
    isNotInTargetList(v) {
      return this.targetList.every(k => v.id !== k.id)
    },
    isNotInSourceList(v) {
      return this.sourceList.every(k => v.id !== k.id)
    },
    deleteEle(ele) {
      for (const item of this.targetList) {
        if (item.id === ele.id) {
          const index = this.targetList.indexOf(item)
          this.targetList.splice(index, 1)
          break
        }
      }
      if (this.isNotInSourceList(ele)) {
        this.sourceList.unshift(ele)
      }
    },
    pushEle(ele) {
      for (const item of this.sourceList) {
        if (item.id === ele.id) {
          const index = this.sourceList.indexOf(item)
          this.sourceList.splice(index, 1)
          break
        }
      }
      if (this.isNotInTargetList(ele)) {
        this.targetList.push(ele)
      }
    },
    setData(dataTransfer) {
      // to avoid Firefox bug
      // Detail see : https://github.com/RubaXa/Sortable/issues/1012
      dataTransfer.setData('Text', '')
    }
  }
}
</script>

<style lang="scss" scoped>
.dndList {
  background: #fff;
  margin-bottom: 1em;
  .dndList-header {
    h3 {
      width: 30%;
      float: left;
      margin-right: 2%;
    }
  }
  .dndList-body {
      &:after {
        content: "";
        display: table;
        clear: both;
      }

    .target {
      border: 1px dashed #d8dce5;
    }
    .dndList-list {
      height: 720px;
      overflow: auto;
      width: 30%;
      float: left;
      padding: 0 .5em;
      &:first-of-type {
        margin-right: 2%;
      }
      .num{
        display:inline-block;width:30px;text-align:right;padding-right:5px;
      }
      .dragArea {
        min-height: 50px;
      }
    }
  }

}

.list-complete-item {
  cursor: pointer;
  position: relative;
  font-size: 14px;
  padding: 5px 12px;
  margin-top: 4px;
  border: 1px solid #bfcbd9;
  transition: all 1s;
}

.list-complete-item-handle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 50px;
}

.list-complete-item-handle2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 20px;
}

.list-complete-item.sortable-chosen {
  background: #4AB7BD;
}

.list-complete-item.sortable-ghost {
  background: #30B08F;
}

.list-complete-enter,
.list-complete-leave-active {
  opacity: 0;
}
</style>
